<template>
	<view class="container">
		<view class="box">
			<view class="shouhuo">
				<view class="p">
					出入库单号 {{ViewData?.name}}
				</view>
				<view class="p">
					状态 {{ViewData?.state}}
				</view>
			</view>

			<view class="danju">
				<view class="p">
					关联单据 {{ViewData?.origin}}
				</view>
				<view class="p">
					优先级 {{ViewData?.priority}}
				</view>
			</view>

			<view class="leibie">
				<view class="p">
					作业类别 {{ViewData?.op_type}}
				</view>

				<view class="p">
					作业类型 {{ViewData?.picking_type_id}}
				</view>
			</view>

			<view class="ren">
				<view class="p">
					物流负责人 {{ViewData?.user_id}}
				</view>

				<view class="p">
					公司 {{ViewData?.company_id}}
				</view>
			</view>

			<view class="jieshou">
				<view class="p">
					接收 {{ViewData?.partner_id}}
				</view>

				<view class="p">
					目的地 {{ViewData?.location_dest_id}}
				</view>
			</view>

			<view class="date">
				<view class="p">
					安排日期 {{ViewData?.scheduled_date}}
				</view>
				<view class="p">
					截止日期 {{ViewData?.date_deadline}}
				</view>
			</view>
		</view>

		<view class="box">
			<view class="wuliu">
				<view class="p">
					物流公司 {{ViewData?.x_studio__2}}
				</view>
				<view class="p">
					付款方式 {{ViewData?.x_studio_field_smbLy}}
				</view>
				<view class="p">
					物流运费 {{ViewData?.x_studio_}}
				</view>
			</view>
			<view class="map">
				<view class="p">
					物流公司 {{ViewData?.carrier_id}}
				</view>
				<view class="p">
					追踪参考 {{ViewData?.carrier_tracking_ref}}
				</view>
				<view class="p">
					补货组 {{ViewData?.group_id}}
				</view>
			</view>
			<view class="zhongliang">
				<view class="p">
					重量 {{ViewData?.weight}}
				</view>
				<view class="p">
					运输重量 {{ViewData?.shipping_weight}}
				</view>
			</view>
		</view>

		<view class="note" v-if="ViewData?.note">
			<view class="title">
				笔记
			</view>
			<view class="" v-html="ViewData?.note">

			</view>
		</view>

		<view class="img-box" v-if="imgList[0]">
			<view class="title">
				图片列表
			</view>
			<view class="content">
				<image class="img" :src="base64(item.photo)" mode="" v-for="(item,i) in imgList" :key="i"
					@click="checkSeeImg(i)"></image>
			</view>
		</view>

		<view class="zuoye" v-if="zuoYeList[0]">
			<view class="title">
				作业
			</view>
			<view class="content">
				<view class="item" v-for="(item,i) in zuoYeList" :key="i" @click="gotoIndex(item.record_id)">
					<view class="top">
						{{item.name}}
					</view>
					<view class="message-box-box">
						<view class="left-name">
							需求：{{item.product_uom_qty + ' ' + item.product_uom}}
						</view>
						<view class="left-name">
							完成：{{(item.quantity_done === "" ?  0 : (item.quantity_done )) + ' ' + item.product_uom}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn-box">
			<view class="btn" @click="_checkBtn()">
				验证
			</view>

			<view class="btn" @click="upLoadImgs()">
				上传图片
			</view>
			
			<view class="btn" @click="gotoXiugaiJiaohuo()">
				修改交货单
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from "vue"
	import {
		jiaohuoMessage,
		photoList,
		getCheckDataList,
		getZuoYeList
	} from '@/api/jiaohuo.js'
	import {
		base64,
		getData
	} from '@/tools/tools.js'

	import {
		baseUrl
	} from '@/api/base_url.js'

	const imgList = ref([])
	const ViewData = ref({})
	const zuoYeList = ref([])
	const id = ref('')
	const set = ref(false)
	const _jiaohuoMessage = (id) => {
		jiaohuoMessage(id).then((res) => {
			console.log(res);
			ViewData.value = res.result
		})
	}

	const _photoList = (id) => {
		photoList(id).then((res) => {
			console.log(res);
			imgList.value = res.photo_list
		})
	}

	const _getZuoYeList = () => {
		getZuoYeList(id.value).then((res) => {
			console.log('作业', res);
			zuoYeList.value = res.result
		})
	}

	// 验证 btn 
	const _checkBtn = () => {
		if (imgList.value.length == 0) {
			uni.showModal({
				title: '提示',
				content: '请添加至少一张图片'
			})
			return
		}

		getCheckDataList(id.value).then((res) => {
			console.log(res);
		})
	}

	const upLoadImgs = () => {
		uni.chooseImage({
			count: 9,
			success: async (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				console.log('选中文件路径：', tempFilePaths);

				// 公共请求参数
				const formData = {
					user_id: getData().id,
					record_id: id.value
				};

				try {
					// 创建上传任务数组
					const uploadTasks = tempFilePaths.map(filePath => {
						return new Promise((resolve, reject) => {
							uni.uploadFile({
								url: baseUrl +
									'/receipt_and_warehousing_xiangqing_upload_photo',
								filePath: filePath,
								name: 'photo',
								formData: formData,
								success: (res) => {
									if (res.statusCode === 200) {
										resolve(res);
									} else {
										reject(new Error('上传失败'));
									}
								},
								fail: reject
							});
						});
					});

					// 等待所有上传完成
					await Promise.all(uploadTasks);

					// 统一延迟刷新数据
					setTimeout(() => {
						_jiaohuoMessage(id.value)
						_photoList(id.value)
					}, 3000);

					uni.showToast({
						title: `成功上传${tempFilePaths.length}张`,
						icon: 'success'
					});
				} catch (error) {
					console.error('上传异常：', error);
					uni.showToast({
						title: '上传出现异常',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				console.error('选择图片失败：', err);
				uni.showToast({
					title: '图片选择失败',
					icon: 'none'
				});
			}
		});

	}

	const checkSeeImg = (index) => {

		// 生成完整图片地址数组
		const urls = imgList.value.map(item => base64(item.photo));
		uni.previewImage({
			current: index, // 指定当前显示图片索引
			urls: urls, // 所有图片地址数组
			loop: true, // 开启循环预览（可选）
			indicator: 'default' // 显示指示器（可选）
		});
	}

	const gotoIndex = (chanpin) => {
		console.log(chanpin);
		set.value = true
		uni.navigateTo({
			url: `/model/jiaohuoModel/jiaohuo_indexData?id=${chanpin}`
		})
	}
	
	const gotoXiugaiJiaohuo = () => {
		uni.navigateTo({
			url: `/model/jiaohuoModel/jiaohuo_xiugai?id=${id.value}`
		})
	}

	onLoad((option) => {
		id.value = option.id
		_photoList(option.id)
		_jiaohuoMessage(option.id)
		_getZuoYeList()
	})

	onShow(() => {
		if (set.value) {
			_photoList(id.value)
			_jiaohuoMessage(id.value)
			_getZuoYeList()
			
		}
		set.value = false
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		min-height: 100vh;
		background-color: #f5f5f5;

		.box {
			background-color: white;
			padding: 10rpx;
			border: 1rpx solid gainsboro;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.shouhuo {

				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
				padding: 0 20rpx 10rpx 20rpx;
				border-bottom: 1rpx solid gainsboro;
			}

			.danju {
				padding: 10rpx 20rpx 10rpx 20rpx;
				border-bottom: 1rpx solid gainsboro;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.leibie {
				border-bottom: 1rpx solid gainsboro;
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.ren {
				border-bottom: 1rpx solid gainsboro;
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.jieshou {
				border-bottom: 1rpx solid gainsboro;
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.date {
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.wuliu {
				padding: 0 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
				border-bottom: 1rpx solid gainsboro;
			}

			.map {
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
				border-bottom: 1rpx solid gainsboro;
			}

			.zhongliang {
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}
		}


		.note {
			background-color: white;

			.title {
				text-align: center;
				border-bottom: 1rpx solid gainsboro;
				padding: 0 0 10rpx 0;
			}

			padding: 10rpx;
			border: 1rpx solid gainsboro;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}

		.img-box {
			background-color: white;

			.title {
				text-align: center;
				border-bottom: 1rpx solid gainsboro;
				padding: 0 0 10rpx 0;
			}

			padding: 10rpx;
			border: 1rpx solid gainsboro;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.content {
				display: grid;
				gap: 10rpx;
				grid-template-columns: repeat(3, 1fr);

				.img {
					width: calc(100%);
					height: 200rpx;
					border: 1rpx solid gainsboro;
					margin-bottom: 1rpx;
				}

			}
		}

		.zuoye {
			background-color: white;

			.title {
				text-align: center;
				border-bottom: 1rpx solid gainsboro;
				padding: 0 0 10rpx 0;
			}

			padding: 10rpx;
			border: 1rpx solid gainsboro;
			border-radius: 10rpx;

			.content {

				.item {
					padding: 20rpx;

					.top {}

					.message-box-box {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}

		.btn-box {
			padding: 20rpx 0;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10rpx;

			.btn {
				text-align: center;
				padding: 20rpx;
				color: white;
				background-color: rgb(51.2, 126.4, 204);
				border-radius: 10rpx;
			}
		}
	}
</style>